<template>
  <view class="station-detail-page">
    <view class="station-item">
      <view class="station-info">
        <view class="station-header">
          <text class="station-name">{{ detailStation.name }}</text>
        </view>
        <view class="station-details">
          <text class="station-facilities">{{ detailStation.facilities }}</text>
        </view>
        <view class="divider-line"></view>
        <view class="price-section-header">
          <text>
            <text class="price-section-title">充电价格</text>
            <text class="price-section-time">({{ startCharge.startTime || '11:00' }}~{{ startCharge.endTime || '17:59' }})</text>
          </text>
          <view class="price-section-detail" @click="showPriceDetail">价格详情 &gt;</view>
        </view>
        <view class="price-cards">
          <view class="price-card origin-price">
            <text class="price-card-label">原价</text>
            <view class="price-card-value">
              <text class="price-card-num">{{ startCharge.price || '1.15' }}</text>
              <text class="price-card-unit">元/度</text>
            </view>
          </view>
          <!--to do VIP卡左上圆角因为切割有点不圆滑，需要调整-->
          <view class="price-card vip-price">
            <text class="price-card-label">VIP价</text>
            <view class="price-card-value">
              <text class="price-card-num">{{ startCharge.vipPrice || '0.86' }}</text>
              <text class="price-card-unit">元/度起</text>
              <view class="price-card-btn">开通</view>
            </view>
          </view>
        </view>
      </view>
    </view>
    <view class="station-item">
      <view style="width: 100%;">
        <view class="price-section-header">
          <text class="price-section-title">停车费</text>
          <view class="price-section-detail" @click="showParkingDetail">计费详情 &gt;</view>
        </view>
        <!-- 停车减免卡片 -->
        <view class="parking-free-card">
          <view class="parking-free-header">
            <view class="parking-icon-bg">
              <text class="parking-icon">P</text>
            </view>
            <view class="parking-free-info">
              <view class="parking-free-title">
                限时免费
                <text class="free-time">（<text class="orange">{{ parkFeeDetail.duration || '暂无' }}</text> <text class="gray">超时</text><text class="red">{{ parkFeeDetail.standards || '暂无' }}</text>）</text>
              </view>
              <view class="parking-free-desc">减免条件:{{ parkFeeDetail.condition || '暂无' }}</view>
            </view>
          </view>
          <view class="parking-free-bottom">
            <view class="parking-free-tip" v-if="myCarList.length === 0">充电前绑定车辆可享停车减免</view>
            <view class="parking-free-tip car-plate-display" v-else>{{ myCarList[selectedVehicleIndex] ? myCarList[selectedVehicleIndex].carNumber : '' }}</view>
            <view class="parking-free-btn" @click="goAddVehicles">{{ myCarList.length === 0 ? '绑定车辆>' : '更换车辆>' }}</view>
          </view>
        </view>
      </view>
    </view>
    <!-- VIP优享月卡卡片 - 已注释
    <view class="station-item" style="background: linear-gradient(180deg, #fef9f3 0%, #ffffff 100%);border: 2rpx solid #fff;">
      <view class="flex-container" style="justify-content: space-between;">
        <view class="station-info">
          <view class="flex-container">
            <view class="station-rating">
              <view class="station-rating-icon">
                <text class="station-rating-p">VIP</text>
              </view>
              <view class="station-rating-text-bg">
                <text class="station-rating-text">优享月卡</text>
              </view>
            </view>
            <text class="vip-1">
              每月预估<text class="vip-2">省34元</text>
            </text>
          </view>
          <text class="vip-3">
            购卡充电更划算
          </text>
        </view>
        <view class="vip-btn">
          <text>99元开通</text>
          <text style="text-decoration: line-through;">29.9元</text>
        </view>
      </view>
      <view class="coupon-container">
        <view class="coupon-card" v-for="(coupon, index) in couponList" :key="index">
          <view class="coupon-top">
            <text class="coupon-num">{{coupon.amount}}元</text>
            <text class="coupon-mul">×</text>
            <text class="coupon-count">{{coupon.count}}张</text>
          </view>
          <view class="coupon-arc"></view>
          <view class="coupon-bottom">{{coupon.name}}</view>
        </view>
      </view>
    </view>
    -->
    <!--
    <view class="station-item">
      <view class="station-info">
        
        <view class="prepay-section">
          
          <view class="prepay-title">预付费</view>
          <view class="prepay-tabs">
            <view
              class="prepay-tab"
              :class="{ active: prepayValue === 50 }"
              @click="selectPrepay(50)"
            >¥50</view>
            <view
              class="prepay-tab"
              :class="{ active: prepayValue === 100 }"
              @click="selectPrepay(100)"
            >¥100</view>
            <view
              class="prepay-tab"
              :class="{ active: prepayValue === 'custom' }"
              @click="selectPrepay('custom')"
            >{{getCustomDisplayText()}}</view>
          </view>
        
        </view>
        <view class="prepay-section">
       
          <view class="prepay-title">使用充电余额抵消（共{{ balanceAmount }}）</view>
          <radio :checked="isSelected" @tap="toggleSelection" color="#ff6b35" />
          
        </view>
        
    
        
        <view class="payment-method-section">
          <view class="payment-method-title">支付方式</view>
          
          <view class="payment-option" @click="showPaymentMethodPopup('prepay')">
            <view class="payment-option-left">
              <image src="/static/images/Frame@2x.png" class="payment-icon" />
              <view class="payment-info">
                <text class="payment-text">预付后充</text>
                <text class="payment-amount">(¥0.00)</text>
      </view>
    </view>
            <view class="payment-option-right">
              <uni-icons type="right" size="16" color="#333" />
            </view>
          </view>
          
          <view class="payment-divider"></view>
          
          <view class="payment-option" @click="showPaymentMethodPopup('balance')">
            <view class="payment-option-left">
              <image src="/static/images/Frame@2x (1).png" class="payment-icon" />
              <view class="payment-info">
                <text class="payment-text">充值余额</text>
                <text class="payment-amount">(¥0.00)</text>
              </view>
            </view>
            <view class="payment-option-right">
              <image src="/static/images/Group 96@2x.png" class="payment-status-icon" />
            </view>
          </view>
        </view>
        
        
        <view class="prepay-btn" :class="{ 'disabled': !prepayValue || (prepayValue === 'custom' && !customPrepayValue) || isChargingDisabled }" @click="startCharging" :disabled="isChargingDisabled">{{getButtonDisplayText()}}</view>
        
      </view>

    </view>
    -->
    
    <!-- 老支付代码 - 已恢复 -->
    <view class="station-item">
      <view class="station-info">
        
        <view class="prepay-section">
          
          <view class="prepay-title">预付费</view>
          <view class="prepay-tabs">
            <view
              class="prepay-tab"
              :class="{ active: prepayValue === 50 }"
              @click="selectPrepay(50)"
            >¥50</view>
            <view
              class="prepay-tab"
              :class="{ active: prepayValue === 100 }"
              @click="selectPrepay(100)"
            >¥100</view>
            <view
              class="prepay-tab"
              :class="{ active: prepayValue === 'custom' }"
              @click="selectPrepay('custom')"
            >{{getCustomDisplayText()}}</view>
          </view>
        
        </view>
        <view class="prepay-section">
       
          <view class="prepay-title">使用充电余额抵消（共{{ balanceAmount }}）</view>
          <radio :checked="isSelected" @tap="toggleSelection" color="#ff6b35" />
          
        </view>
        
        <view class="prepay-btn" :class="{ 'disabled': !prepayValue || (prepayValue === 'custom' && !customPrepayValue) || isChargingDisabled }" @click="startCharging" :disabled="isChargingDisabled">{{getButtonDisplayText()}}</view>
        
        <!-- 跳转到充电中页面的按钮 -->
         <!--
        <view class="charging-page-btn" @click="goToChargingPage">
          查看充电状态
        </view>
        -->
      </view>

    </view>
    
    <!-- 新样式代码 - 已注释，保留备用 -->
    <!--
    <view class="station-item">
      <view class="station-info">
        
        <view class="payment-method-section">
          <view class="payment-method-title">支付方式</view>
          
          <view class="payment-option" @click="showPaymentMethodPopup('prepay')">
            <view class="payment-option-left">
              <image src="/static/images/Frame@2x.png" class="payment-icon" />
              <view class="payment-info">
                <text class="payment-text">预付后充</text>
                <text class="payment-amount">(¥0.00)</text>
              </view>
            </view>
            <view class="payment-option-right">
              <uni-icons type="right" size="16" color="#333" />
            </view>
          </view>
          
          <view class="payment-divider"></view>
          
          <view class="payment-option" @click="showPaymentMethodPopup('balance')">
            <view class="payment-option-left">
              <image src="/static/images/Frame@2x (1).png" class="payment-icon" />
              <view class="payment-info">
                <text class="payment-text">充值余额</text>
                <text class="payment-amount">(¥0.00)</text>
              </view>
            </view>
            <view class="payment-option-right">
              <image src="/static/images/Group 96@2x.png" class="payment-status-icon" />
            </view>
          </view>
        </view>
        
      </view>

    </view>
    -->
    <!-- 支付卡片 -->
    <!--
    <view class="station-item">
      <view class="payment-card-content">
        <view class="payment-amount-display">
          <text class="currency-symbol">¥</text>
          <text class="amount-value">0.00</text>
        </view>
        <view class="start-charging-btn" @click="startCharging" :disabled="isChargingDisabled">
          启动充电
        </view>
      </view>
    </view>
    -->
    <!-- 自定义金额弹窗 -->
    <uni-popup ref="customAmountPopup" type="bottom" :maskClick="true" :animation="true" :safeArea="true">
      <view class="custom-amount-popup">
        <view class="custom-amount-header">
          <text class="custom-amount-title">自定义金额</text>
          <uni-icons type="closeempty" size="20" color="#666" @click="hideCustomAmount" />
        </view>
        
        <!-- 输入框区域 -->
        <view class="amount-input-section">
          <view class="amount-input-container">
            <text class="currency-symbol">¥</text>
            <input 
              class="amount-input" 
              :value="customAmount" 
              disabled 
              placeholder="0.00"
            />
          </view>
        </view>
        
        <!-- 数字键盘区域 -->
        <view class="keyboard-section">
          <view class="keyboard-row">
            <view class="keyboard-key" @click="inputNumber('1')">1</view>
            <view class="keyboard-key" @click="inputNumber('2')">2</view>
            <view class="keyboard-key" @click="inputNumber('3')">3</view>
          </view>
          <view class="keyboard-row">
            <view class="keyboard-key" @click="inputNumber('4')">4</view>
            <view class="keyboard-key" @click="inputNumber('5')">5</view>
            <view class="keyboard-key" @click="inputNumber('6')">6</view>
          </view>
          <view class="keyboard-row">
            <view class="keyboard-key" @click="inputNumber('7')">7</view>
            <view class="keyboard-key" @click="inputNumber('8')">8</view>
            <view class="keyboard-key" @click="inputNumber('9')">9</view>
          </view>
          <view class="keyboard-row">
            <view class="keyboard-key" @click="inputNumber('0')">0</view>
            <view class="keyboard-key" @click="inputNumber('.')">.</view>
            <view class="keyboard-key action-key" @click="deleteNumber">删除</view>
          </view>
          <view class="keyboard-row">
            <view class="keyboard-key action-key confirm-key" @click="confirmAmount">完成</view>
          </view>
        </view>
      </view>
    </uni-popup>
    
    <!-- 价格详情弹窗 -->
    <uni-popup ref="pricePopup" type="bottom" :maskClick="true" :animation="true" :safeArea="true">
      <view class="price-popup-content">
        <view class="price-popup-header">
          <text class="price-popup-title">价格详情</text>
          <uni-icons type="closeempty" size="20" color="#666" @click="hidePriceDetail" />
        </view>
        <!--to do padding: 30rpx 0; 改为margin,他占据了空间-->
        <view class="price-table">
          <view class="table-header">
            <view class="th time-col">充电时段</view>
            <view class="th type-col">类型</view>
            <view class="th price-col">价格<text class="unit">(元/度)</text></view>
            <view class="th equal-col">=</view>
            <view class="th power-col">电费<text class="unit">(元/度)</text></view>
            <view class="th plus-col">+</view>
            <view class="th service-col">服务费<text class="unit">(元/度)</text></view>
          </view>
          <view class="table-row" v-for="(item, index) in priceList" :key="index">
            <view class="lowest-tag" v-if="item.isLowest">全天最低</view>
            <view class="td time-col">{{ item.range }}</view>
            <view class="td type-col">
              <text class="vip-tag">VIP</text>
              <text class="price-type">原价</text>
            </view>
            <view class="td price-col">
              <text class="price-value">{{ item.vipPrice }}</text>
              <text class="original-price">{{ item.originalPrice }}</text>
            </view>
            <view class="td equal-col">=</view>
            <view class="td power-col">
              <text class="price-value">{{ item.vipPowerPrice }}</text>
              <text class="original-price">{{ item.originalPowerPrice }}</text>
            </view>
            <view class="td plus-col">+</view>
            <view class="td service-col">
              <text class="price-value">{{ item.vipServicePrice }}</text>
              <text class="original-price">{{ item.originalServicePrice }}</text>
            </view>
          </view>
        </view>
        <view class="price-notice">
          <uni-icons type="info" size="14" color="#999" />
          <text class="notice-text">平台会以您开启充电时价格详情进行计费，如价格详情在充电后发生变化，结算以价格详情快照为准。</text>
        </view>
      </view>
    </uni-popup>

    <!-- 停车费详情弹窗 -->
    <uni-popup ref="parkingPopup" type="bottom" :maskClick="true" :animation="true" :safeArea="true">
      <view class="parking-popup-content">
        <view class="parking-popup-header">
          <text class="parking-popup-title">停车费</text>
          <uni-icons type="closeempty" size="20" color="#666" @click="hideParkingDetail" />
        </view>
        <view class="parking-detail-content">
          <view class="parking-detail-header">
            <text class="parking-free-title">限时免费</text>
            <!--
            <text class="parking-bind-link" @click="goAddVehicles">{{ myCarList.length === 0 ? '绑定车辆>' : '更换车辆>' }}</text>
            -->
          </view>
          <view class="parking-detail-list">
            <view class="parking-detail-item">
              <text class="parking-detail-label">减免条件</text>
              <text class="parking-detail-value">{{ parkFeeDetail.condition || '暂无' }}</text>
            </view>
            <view class="parking-detail-item">
              <text class="parking-detail-label">减免时长</text>
              <text class="parking-detail-value">{{ parkFeeDetail.duration || '暂无' }}</text>
            </view>
            <view class="parking-detail-item">
              <text class="parking-detail-label">收费标准</text>
              <text class="parking-detail-value">{{ parkFeeDetail.standards || '暂无' }}</text>
            </view>
          </view>
          <view class="parking-detail-notice">
            <text class="parking-notice-text">{{ parkFeeDetail.remark || '暂无' }}</text>
          </view>
        </view>
      </view>
    </uni-popup>

    <!-- 车辆选择弹窗 -->
    <uni-popup ref="vehicleSelectPopup" type="bottom" :maskClick="true" :animation="true" :safeArea="true">
      <view class="vehicle-select-popup">
        <view class="vehicle-select-header">
          <text class="vehicle-select-title">选择充电车辆</text>
          <uni-icons type="closeempty" size="20" color="#666" @click="hideVehicleSelect" />
        </view>
        
        <!-- 车辆列表 -->
        <view class="vehicle-list" v-if="myCarList.length > 0">
          <view 
            class="vehicle-item" 
            v-for="(vehicle, index) in myCarList" 
            :key="vehicle.id"
            @click="selectVehicle(index)"
          >
            <view class="vehicle-icon">
              <image src="/static/images/Group 199@2x.png" class="car-icon" />
            </view>
            <view class="vehicle-info">
              <text class="vehicle-plate">{{ vehicle.carNumber }}</text>
              <view class="vehicle-tag">
                <text class="tag-text">充电车辆</text>
              </view>
            </view>
            <view class="vehicle-radio">
              <radio 
                :checked="selectedVehicleIndex === index" 
                color="#ff6b35"
              />
            </view>
          </view>
        </view>
        
        <!-- 空状态 -->
        <view class="vehicle-empty" v-else>
          <text class="empty-text">暂无车辆信息</text>
        </view>
        
        <!-- 底部操作 -->
        <view class="vehicle-select-bottom">
          <view class="add-vehicle-link" @click="goToAddVehicle" v-if="myCarList.length < 5">
            <text>新增车辆</text>
            <uni-icons type="plus" size="16" color="#ff6b35" />
          </view>
        </view>
      </view>
    </uni-popup>
    
    <!-- 支付方式选择弹窗 -->
    <uni-popup ref="paymentMethodPopup" type="bottom" :maskClick="true" :animation="true" :safeArea="true">
      <view class="payment-method-popup">
        <view class="payment-method-header">
          <text class="payment-method-title">支付方式</text>
          <uni-icons type="closeempty" size="20" color="#666" @click="hidePaymentMethodPopup" />
        </view>
        
        <!-- 金额选择按钮 -->
        <view class="amount-buttons">
          <view class="amount-btn" :class="{ active: selectedAmount === 50 }" @click="selectAmount(50)">¥50</view>
          <view class="amount-btn" :class="{ active: selectedAmount === 80 }" @click="selectAmount(80)">¥80</view>
          <view class="amount-btn" :class="{ active: selectedAmount === 100 }" @click="selectAmount(100)">¥100</view>
        </view>
        
        <!-- 自定义金额输入 -->
        <view class="custom-amount-input">
          <text class="currency-symbol">¥</text>
          <input class="amount-input-field" placeholder="输入自定义金额" />
        </view>
        
        <!-- 预付后充说明 -->
        <view class="prepay-description">
          <text class="description-title">{{ currentPaymentMethod === 'prepay' ? '预付后充' : '充值余额' }}</text>
          <text class="description-text">预付充电费、充满自停,余额退还</text>
        </view>
        
        <!-- 确定按钮 -->
        <view class="confirm-btn" @click="confirmPaymentMethod">
          确定
        </view>
      </view>
    </uni-popup>
  </view>
</template>

<script>
import uniPopup from '@/uni_modules/uni-popup/components/uni-popup/uni-popup.vue'
import uniSwiperDot from '@/uni_modules/uni-swiper-dot/components/uni-swiper-dot/uni-swiper-dot.vue'
import uniIcons from '@/uni_modules/uni-icons/components/uni-icons/uni-icons.vue'
import { createPrepayOrder as createPrepayOrderAPI } from '@/api/charging/index.js'
import { getOrderStatus, getMyCarList } from '@/api/charging/index.js'
import { getStationFeeDetail } from '@/api/charging/index.js'
import { getStationStartCharegDetail } from '@/api/charging/index.js'
import { getStationParkFeeDetail } from '@/api/charging/index.js'
import { getInfo } from '@/api/index/index.js'

export default {
  components: {
    uniPopup,
    uniSwiperDot,
    uniIcons
  },
  data() {
    return {
      current: 0,
      imgList: [
        { url: '/pagesOne/static/images/3.png' },
        { url: '/static/images/4.png' },
        { url: '/static/images/5.png' }
      ],
      detailStation: {
        name: '[菲兹充电] 七莘路充电站-B',
        facilities: '直流 ｜120.0kw ｜枪编号：442',
        price: '1.05',
        status: 'available',
        availableCount: 3,
        totalCount: 4
      },
      pileList: [
        { status: '空闲', code: '12269225', power: '120kW' },
        { status: '占用', code: '12269226', power: '90kW' },
        { status: '80%', code: '12269227', power: '60kW' }
      ],
      priceList: [
        {
          range: '00:00-06:00',
          vipPrice: '0.8500',
          vipPowerPrice: '0.3100',
          vipServicePrice: '0.5400',
          originalPrice: '1.2000',
          originalPowerPrice: '0.6900',
          originalServicePrice: '0.5100',
          isLowest: true
        },
        {
          range: '06:00-08:00',
          vipPrice: '0.8900',
          vipPowerPrice: '0.3100',
          vipServicePrice: '0.5800',
          originalPrice: '1.3000',
          originalPowerPrice: '0.7100',
          originalServicePrice: '0.5900',
          isLowest: false
        },
        {
          range: '08:00-10:00',
          vipPrice: '0.9900',
          vipPowerPrice: '0.3500',
          vipServicePrice: '0.6400',
          originalPrice: '1.4000',
          originalPowerPrice: '0.7900',
          originalServicePrice: '0.6100',
          isLowest: false
        },
        {
          range: '10:00-12:00',
          vipPrice: '0.9900',
          vipPowerPrice: '0.3500',
          vipServicePrice: '0.6400',
          originalPrice: '1.4000',
          originalPowerPrice: '0.7900',
          originalServicePrice: '0.6100',
          isLowest: false
        },
        {
          range: '12:00-17:00',
          vipPrice: '0.9500',
          vipPowerPrice: '0.3300',
          vipServicePrice: '0.6200',
          originalPrice: '1.3500',
          originalPowerPrice: '0.7500',
          originalServicePrice: '0.6000',
          isLowest: false
        },
        {
          range: '17:00-24:00',
          vipPrice: '0.8900',
          vipPowerPrice: '0.3100',
          vipServicePrice: '0.5800',
          originalPrice: '1.3000',
          originalPowerPrice: '0.7100',
          originalServicePrice: '0.5900',
          isLowest: false
        }
      ],
      prepayValue: null,
      customPrepayValue: '', // 新增：专门用于自定义金额的变量
      couponList: [
        { amount: '2', count: '5', name: '充电直降券' },
        { amount: '5', count: '3', name: '满减券' },
        { amount: '10', count: '2', name: '折扣券' }
      ],
      customAmount: '0.00',
      isCustomAmountPopupVisible: false,
      isSelected: false, // 新增：用于控制单选按钮的选中状态
      balanceAmount: 0, // 新增：充电余额数量
      QRCode: '', // 新增：二维码变量
      // 新增订单状态检查相关变量
      orderId: '', // 当前订单ID
      checkCount: 0, // 检查次数
      maxCheckCount: 10, // 最大检查次数
      checkTimer: null, // 定时器
      // 新增车辆列表相关变量
      myCarList: [], // 我的车辆列表
      isLoading: false, // 加载状态
      selectedVehicleIndex: -1, // 新增：选中的车辆索引
      startCharge: {}, // 新增：启动充电详情
      // 新增：停车费详情数据
      parkFeeDetail: {
        condition: '',
        duration: '',
        standards: '',
        remark: ''
      },
      stationName: '场站名称', // 场站名称
      debounceTimer: null, // 防抖定时器
      isChargingDisabled: false, // 新增：控制开始充电按钮的禁用状态
      // 新增：支付方式选择弹窗相关变量
      currentPaymentMethod: 'prepay', // 当前选择的支付方式：prepay 或 balance
      selectedAmount: 50, // 当前选择的金额
    }
  },
  mounted() {
    // 确保popup组件已经准备好
    setTimeout(() => {
      if (this.$refs.pricePopup) {
        console.log('价格弹窗组件已加载');
      }
    }, 100);
  },
  onUnload() {
		// 清理定时器
		this.stopOrderStatusCheck();
    // 清理防抖定时器
    if (this.debounceTimer) {
      clearTimeout(this.debounceTimer);
      this.debounceTimer = null;
    }
	},
  onLoad(options) {
    // 移除车辆列表获取，改为在 onShow 中获取
    // 加载场站价格详情改为在获取启动充电详情后触发（依赖 stationId）
    // this.loadStationFeeDetail(options);
    // 不再在订单页调用启动充电前详情接口，扫码页会处理
    if (options && options.qrCode) {
      this.QRCode = decodeURIComponent(options.qrCode)
    }
    // 新增：接收扫码带入的启动充电详情
    if (options && options.detail) {
      try {
        const detail = JSON.parse(decodeURIComponent(options.detail)) || {}
        // 站点基础信息
        const facilitiesText = `${detail.equipmentType || ''}${detail.power ? ' ｜' + detail.power + 'kw' : ''} ｜枪编号：${detail.connectorId || ''}`
        this.detailStation = {
          ...this.detailStation,
          id: detail.stationId || this.detailStation.id,
          name: detail.stationName || this.detailStation.name,
          price: detail.price || this.detailStation.price,
          facilities: facilitiesText
        }
        // 绑定价格与时段
        this.startCharge = {
          startTime: detail.startTime || '',
          endTime: detail.endTime || '',
          price: detail.price || '',
          vipPrice: detail.vipPrice || '',
          connectorId: detail.connectorId || ''
        }
        // 若有 stationId，加载价格详情
        if (detail.stationId) {
          this.loadStationFeeDetail(detail.stationId)
          this.loadStationParkFeeDetail(detail.stationId)
        }
      } catch (e) {
        console.error('解析detail失败', e)
      }
    }
  },
  onShow() {
    // 每次显示页面时获取车辆列表
    this.getMyCarList();
    // 获取用户信息（包括充电余额）
    this.getUserInfo();
  },
  methods: {
    onSwiperChange(e) {
      this.current = e.detail.current;
    },
    onPriceDetail() {
      uni.navigateTo({
        url: '/pages/price-detail/index'
      });
    },
    onCopyCode(code) {
      uni.setClipboardData({
        data: code,
        success: () => {
          uni.showToast({ title: '已复制', icon: 'none' });
        }
      });
    },
    showPriceDetail() {
      if(this.$refs.pricePopup) {
        console.log('打开价格详情弹窗');
        this.$refs.pricePopup.open('bottom');
      } else {
        console.log('价格弹窗组件未找到');
      }
    },
    hidePriceDetail() {
      if(this.$refs.pricePopup) {
        this.$refs.pricePopup.close();
      }
    },
    selectPrepay(val) {
      if (val === 'custom') {
        this.prepayValue = 'custom'; // 只标记为自定义，不改变customPrepayValue
        this.showCustomAmountPopup();
      } else {
        this.prepayValue = val; // 50或100
      }
    },
    goAddVehicles() {
      // 显示车辆选择弹窗
      this.showVehicleSelect();
    },
    showParkingDetail() {
      if(this.$refs.parkingPopup) {
        console.log('打开停车费详情弹窗');
        this.$refs.parkingPopup.open('bottom');
      } else {
        console.log('停车费详情弹窗组件未找到');
      }
    },
    hideParkingDetail() {
      if(this.$refs.parkingPopup) {
        this.$refs.parkingPopup.close();
      }
    },
		// 开始充电
    startCharging() {
			// 防抖处理：如果正在执行中，直接返回
			if (this.debounceTimer) {
				console.log('防抖：正在执行中，忽略重复点击');
				return;
			}
			
			// 立即禁用按钮
			this.isChargingDisabled = true;
			
			// 设置防抖定时器
			this.debounceTimer = setTimeout(() => {
				this.debounceTimer = null;
			}, 2000); // 2秒内不允许重复点击
			
			console.log('开始充电，防抖已设置，按钮已禁用');
			
			// 校验是否绑定了车牌号
			if (this.myCarList.length === 0 || this.selectedVehicleIndex === -1) {
				// 解除按钮禁用状态
				this.isChargingDisabled = false;
				uni.showModal({
					title: '提示',
					content: '请先绑定车牌号才能开始充电',
					confirmText: '去绑定',
					cancelText: '取消',
					success: (res) => {
						if (res.confirm) {
							this.goAddVehicles();
						}
					}
				});
				return;
			}
			
			// 校验是否选择了预付费金额
			if (!this.prepayValue || this.prepayValue === null) {
				// 解除按钮禁用状态
				this.isChargingDisabled = false;
				uni.showToast({
					title: '请先选择预付费金额',
					icon: 'none'
				});
				return;
			}
			
			// 如果是自定义金额，校验是否输入了有效金额
			if (this.prepayValue === 'custom' && (!this.customPrepayValue || this.customPrepayValue <= 0)) {
				// 解除按钮禁用状态
				this.isChargingDisabled = false;
				uni.showToast({
					title: '请输入有效的自定义金额',
					icon: 'none'
				});
				return;
			}
			
			// 计算支付金额，使用安全的浮点数运算
			const advanceTotal = this.prepayValue === 'custom' ? this.parseFloatSafe(this.customPrepayValue) : this.parseFloatSafe(this.prepayValue);
			// 调整算法：chargeBalanceAdvance不能超过advanceTotal
			const chargeBalanceAdvance = this.isSelected ? Math.min(this.parseFloatSafe(this.balanceAmount), advanceTotal) : 0;
			const cashAdvance = Math.max(0, this.subtractFloat(advanceTotal, chargeBalanceAdvance));
			
			console.log('支付参数:', {
				advanceTotal,
				chargeBalanceAdvance,
				cashAdvance,
				deviceCode: this.QRCode
			});
			
			// 调用预支付接口
			createPrepayOrderAPI({
				advanceTotal,
				chargeBalanceAdvance,
				cashAdvance,
				deviceCode: this.QRCode,
				carNumber: this.myCarList[this.selectedVehicleIndex] ? this.myCarList[this.selectedVehicleIndex].carNumber : ''
			}).then(response => {
				console.log('预支付接口响应:', response);
				
				if (response.success) {
					// 预支付成功，检查是否需要现金支付
					const payData = response.data;
					
					// 如果不需要现金支付（needCashPay为false），直接跳转
					if (payData.payData && payData.payData.needCashPay === false) {
						console.log('无需现金支付，直接跳转');
						uni.showToast({
							title: '支付成功',
							icon: 'success'
						});
						
						// 直接开始检查订单状态
						if (response.data.id) {
							this.startOrderStatusCheck(response.data.id);
						} else {
							console.error('预支付响应中没有订单ID');
							uni.showToast({
								title: '支付成功，但无法获取订单状态',
								icon: 'none'
							});
						}
						return;
					}
					
					// 需要现金支付时，检查是否有支付数据
					if (!payData.payData || !payData.payData.payData) {
						console.error('预支付响应中缺少支付数据');
						// 解除按钮禁用状态
						this.isChargingDisabled = false;
						uni.showToast({
							title: '支付数据异常',
							icon: 'none'
						});
						return;
					}
					
					try {
						// 解析支付数据字符串
						const payInfo = JSON.parse(payData.payData.payData);
						console.log('解析后的支付参数:', payInfo);
      
						// 验证必需的支付参数
						if (!payInfo.timeStamp || !payInfo.nonceStr || !payInfo.packageVal || !payInfo.paySign || !payInfo.signType) {
							console.error('支付参数不完整:', payInfo);
							// 解除按钮禁用状态
							this.isChargingDisabled = false;
							uni.showToast({
								title: '支付参数不完整',
								icon: 'none'
							});
							return;
						}
						
						// 调用微信支付
					uni.requestPayment({
						provider: 'wxpay',
							timeStamp: payInfo.timeStamp,
							nonceStr: payInfo.nonceStr,
							package: payInfo.packageVal,
							signType: payInfo.signType,
							paySign: payInfo.paySign,
						success: (res) => {
							console.log('微信支付成功:', res);
							uni.showToast({
								title: '支付成功',
								icon: 'success'
							});
							
							// 支付成功后开始检查订单状态
							if (response.data.id) {
								this.startOrderStatusCheck(response.data.id);
							} else {
								console.error('预支付响应中没有订单ID');
								uni.showToast({
									title: '支付成功，但无法获取订单状态',
									icon: 'none'
								});
							}
						},
						fail: (err) => {
							console.error('微信支付失败:', err);
								// 解除按钮禁用状态
								this.isChargingDisabled = false;
							uni.showToast({
								title: `支付失败: ${err.errMsg}`,
								icon: 'none'
							});
						}
					});
					} catch (error) {
						console.error('解析支付数据失败:', error);
						// 解除按钮禁用状态
						this.isChargingDisabled = false;
						uni.showToast({
							title: '支付数据解析失败',
							icon: 'none'
						});
					}
				} else {
					// 预支付失败，显示错误信息
					console.error('预支付接口返回错误:', response.msg);
					// 解除按钮禁用状态
					this.isChargingDisabled = false;
					uni.showToast({
						title: response.msg || '预支付失败',
						icon: 'none'
					});
				}
			}).catch(error => {
				console.error('预支付接口调用失败:', error);
				// 解除按钮禁用状态
				this.isChargingDisabled = false;
				uni.showToast({
					title: error.msg || '网络请求失败',
					icon: 'none'
				});
			});
		},
    
    // 创建预支付订单
    createPrepayOrder(params) {
      console.log('预支付参数:', params);
      
      createPrepayOrderAPI(params)
        .then(response => {
          console.log('预支付响应:', response);
          
          // 发起微信支付
          this.startWxPay(response.data.payData);
        })
        .catch(error => {
          console.error('预支付接口调用失败:', error);
          uni.showToast({
            title: error.msg || '预支付失败',
            icon: 'none'
          });
        });
    },
    
    // 发起微信支付
    startWxPay(payData) {
      // 解析支付数据
      const payInfo = JSON.parse(payData.payData);
      
      uni.requestPayment({
        provider: 'wxpay',
        timeStamp: payInfo.timeStamp,
        nonceStr: payInfo.nonceStr,
        package: payInfo.packageVal,
        signType: payInfo.signType,
        paySign: payInfo.paySign,
        success: (res) => {
          console.log('微信支付成功:', res);
          uni.showToast({
            title: '支付成功',
            icon: 'success'
          });
          
          // 支付成功后调用后端接口确认支付状态
        },
        fail: (err) => {
          console.error('微信支付失败:', err);
          uni.showToast({
            title: `支付失败: ${err.errMsg || '请重试'}`,
            icon: 'none'
          });
        }
      });
    },
    inputNumber(num) {
      // 处理小数点
      if (num === '.') {
        if (this.customAmount.includes('.')) {
          return; // 已经有小数点了，不允许再输入
        }
        if (this.customAmount === '0.00') {
          this.customAmount = '0.';
        } else {
          this.customAmount += '.';
        }
        return;
      }
      
      // 处理数字
      if (this.customAmount === '0.00') {
        this.customAmount = num;
      } else {
        // 检查小数点后的位数
        if (this.customAmount.includes('.')) {
          const parts = this.customAmount.split('.');
          if (parts[1] && parts[1].length >= 2) {
            return; // 最多两位小数
          }
        }
        this.customAmount += num;
      }
    },
    deleteNumber() {
      if (this.customAmount.length > 1) {
        this.customAmount = this.customAmount.slice(0, -1);
        // 如果删除后为空或只有小数点，重置为0.00
        if (this.customAmount === '' || this.customAmount === '.') {
          this.customAmount = '0.00';
        }
      } else {
        this.customAmount = '0.00';
      }
    },
    confirmAmount() {
      const amount = parseFloat(this.customAmount);
      // 注释掉最低20块钱的限制
      // if (amount >= 20) {
        this.customPrepayValue = amount; // 保存到自定义金额变量
        this.hideCustomAmount();
      // } else {
      //   uni.showToast({
      //     title: '自定义金额不能低于20元',
      //     icon: 'none'
      //   });
      // }
    },
    showCustomAmountPopup() {
      this.customAmount = '0.00';
      this.isCustomAmountPopupVisible = true;
      this.$refs.customAmountPopup.open('bottom');
    },
    hideCustomAmount() {
      this.isCustomAmountPopupVisible = false;
      this.$refs.customAmountPopup.close();
    },
    getCustomDisplayText() {
      // 只受customPrepayValue控制，不受prepayValue影响
      return this.customPrepayValue ? `¥${this.customPrepayValue}` : '自定义';
    },
    getPrepayDisplayText() {
      if (this.prepayValue === null) {
        return '0';
      }
      if (this.prepayValue === 'custom') {
        return this.customPrepayValue || '自定义';
      }
      return this.prepayValue;
    },
    
    // 获取自定义金额显示文本，安全处理数值
    getCustomDisplayText() {
      // 只受customPrepayValue控制，不受prepayValue影响
      if (this.customPrepayValue) {
        const amount = this.parseFloatSafe(this.customPrepayValue);
        return amount > 0 ? `¥${this.formatCurrency(amount)}` : '自定义';
      }
      return '自定义';
    },
    
    // 获取按钮显示文本，包含充电余额抵消逻辑
    getButtonDisplayText() {
      // 如果用户选中了使用充电余额抵消
      if (this.isSelected) {
        // 计算预付费金额，使用安全的数值转换
        let prepayAmount = 0;
        if (this.prepayValue === 'custom') {
          prepayAmount = this.parseFloatSafe(this.customPrepayValue) || 0;
        } else if (this.prepayValue !== null) {
          prepayAmount = this.parseFloatSafe(this.prepayValue) || 0;
        }
        
        // 安全地获取充电余额
        const balanceAmount = this.parseFloatSafe(this.balanceAmount) || 0;
        
        // 如果预付费金额大于充电余额，使用安全的浮点数比较
        if (this.compareFloat(prepayAmount, balanceAmount) > 0) {
          const remainingAmount = this.subtractFloat(prepayAmount, balanceAmount);
          return `仍需支付${this.formatCurrency(remainingAmount)}元，开始充电`;
        }
      }
      
      // 默认显示文本
      return `预付${this.getPrepayDisplayText()}元，开始充电`;
    },
    
    // 安全的浮点数解析，避免 NaN
    parseFloatSafe(value) {
      if (value === null || value === undefined || value === '') {
        return 0;
      }
      const parsed = parseFloat(value);
      return isNaN(parsed) ? 0 : parsed;
    },
    
    // 安全的浮点数比较，处理精度问题
    compareFloat(a, b) {
      const precision = 0.01; // 精度为1分钱
      const diff = a - b;
      if (Math.abs(diff) < precision) {
        return 0; // 相等
      }
      return diff > 0 ? 1 : -1; // 大于或小于
    },
    
    // 安全的浮点数减法，避免精度误差
    subtractFloat(a, b) {
      // 转换为分为单位进行计算，避免浮点数精度问题
      const aCents = Math.round(a * 100);
      const bCents = Math.round(b * 100);
      const resultCents = aCents - bCents;
      return resultCents / 100;
    },
    
    // 格式化货币显示，保留两位小数
    formatCurrency(amount) {
      // 使用 toFixed 确保显示两位小数，然后转换为数字避免末尾的0
      const formatted = parseFloat(amount.toFixed(2));
      return formatted;
    },
    toggleSelection() {
      this.isSelected = !this.isSelected;
    },
    goToChargingPage() {
      // 如果有订单号，传递到充电页面
      if (this.orderId) {
        uni.reLaunch({ 
          url: `/pages/charging/index?orderNum=${this.orderId}`
        });
      } else {
        // 没有订单号时，使用测试数据
        uni.reLaunch({ 
          url: '/pages/charging/index?orderNum=TEST123456'
        });
      }
    },
    testOrderStatus() {
      if (this.orderId) {
        getOrderStatus(this.orderId).then(response => {
          console.log('订单状态响应:', response);
          uni.showModal({
            title: '订单状态',
            content: JSON.stringify(response.data, null, 2),
            showCancel: false
          });
        }).catch(error => {
          console.error('订单状态接口调用失败:', error);
          uni.showToast({
            title: error.msg || '获取订单状态失败',
            icon: 'none'
          });
        });
      } else {
        uni.showToast({
          title: '请先创建订单',
          icon: 'none'
        });
      }
    },
		// 检查订单状态
		checkOrderStatus() {
			if (!this.orderId) {
				console.error('订单ID不存在');
				return;
			}
			
			if (this.checkCount >= this.maxCheckCount) {
				console.log('已达到最大检查次数，停止检查');
				uni.showToast({
					title: '订单状态检查超时，请稍后重试',
					icon: 'none',
					duration: 3000
				});
				this.stopOrderStatusCheck();
				return;
			}
			
			this.checkCount++;
			console.log(`第${this.checkCount}次检查订单状态，订单ID: ${this.orderId}`);
			
			getOrderStatus(this.orderId).then(response => {
				console.log('订单状态响应:', response);
				
				if (response.code === 0 && response.success) {
					const orderData = response.data;
					
					if (orderData.payState >= 2) {
						// 支付成功（状态大于等于2），跳转到充电页
						console.log('支付成功，跳转到充电页，支付状态:', orderData.payState);
						this.stopOrderStatusCheck();
						uni.showToast({
							title: '支付成功，开始充电',
							icon: 'success'
						});
						setTimeout(() => {
							// 传递订单号到充电页面
							uni.navigateTo({ 
								url: `/pages/charging/index?orderNum=${orderData.orderNumber}`
							});
						}, 1500);
					} else {
						// 支付状态小于2，继续检查
						console.log(`当前支付状态: ${orderData.payState}，继续检查...`);
						this.scheduleNextCheck();
					}
				} else {
					console.error('订单状态接口返回错误:', response.msg);
					this.scheduleNextCheck();
				}
			}).catch(error => {
				console.error('订单状态接口调用失败:', error);
				this.scheduleNextCheck();
			});
		},
		
		// 安排下次检查
		scheduleNextCheck() {
			this.checkTimer = setTimeout(() => {
				this.checkOrderStatus();
			}, 3000); // 每3秒检查一次
		},
		
		// 停止订单状态检查
		stopOrderStatusCheck() {
			if (this.checkTimer) {
				clearTimeout(this.checkTimer);
				this.checkTimer = null;
			}
			this.checkCount = 0;
		},
		
		// 开始订单状态检查
		startOrderStatusCheck(orderId) {
			this.orderId = orderId;
			this.checkCount = 0;
			console.log('开始检查订单状态，订单ID:', orderId);
			this.checkOrderStatus();
		},

    // 获取我的车辆列表
    getMyCarList() {
      this.isLoading = true;
      getMyCarList().then(response => {
        console.log('获取车辆列表响应:', response);
        if (response.code === 0 && response.success) {
          // 根据isDefault字段重新排列列表，默认车辆放在最前面
          const sortedCarList = [...response.data.records];
          const defaultIndex = sortedCarList.findIndex(car => car.isDefault === true);
          
          if (defaultIndex > 0) {
            // 找到默认车辆，将其移到最前面
            const defaultCar = sortedCarList.splice(defaultIndex, 1)[0];
            sortedCarList.unshift(defaultCar);
          }
          
          this.myCarList = sortedCarList || [];
          // 设置默认选中第一辆车
          if (this.myCarList.length > 0) {
            this.selectedVehicleIndex = 0;
          }
        } else {
          uni.showToast({
            title: response.msg || '获取车辆列表失败',
            icon: 'none'
          });
        }
      }).catch(error => {
        console.error('获取车辆列表接口调用失败:', error);
        uni.showToast({
          title: error.msg || '网络请求失败',
          icon: 'none'
        });
      }).finally(() => {
        this.isLoading = false;
      });
    },

    // 选择车辆
    selectVehicle(index) {
      this.selectedVehicleIndex = index;
      this.hideVehicleSelect();
    },
    // 显示车辆选择弹窗
    showVehicleSelect() {
      this.$refs.vehicleSelectPopup.open('bottom');
    },
    // 隐藏车辆选择弹窗
    hideVehicleSelect() {
      this.$refs.vehicleSelectPopup.close();
    },
    // 跳转到添加车辆页面
    goToAddVehicle() {
      if (this.myCarList.length >= 5) {
        uni.showToast({
          title: '最多只能绑定5辆车',
          icon: 'none'
        });
        return;
      }
      uni.navigateTo({ url: '/pages/addVehicles/index' });
    },
    // 加载场站价格详情
    loadStationFeeDetail(arg) {
      // 接收字符串或对象
      const stationId = typeof arg === 'string' ? arg : (arg && arg.stationId) || '';
      if (!stationId) {
        console.error('场站标识不存在，无法加载价格详情');
        return;
      }
      getStationFeeDetail({ stationId }).then(response => {
        console.log('场站价格详情响应:', response);
        if (response.code === 0 && response.success && Array.isArray(response.data)) {
          // 将后端数据映射为前端展示结构
          const mapped = response.data.map(item => ({
            range: item.rangeTime || '',
            // 价格列显示合计价：VIP合计 和 原价合计
            vipPrice: item.vipFee || '',
            originalPrice: item.fee || '',
            // 电费列
            vipPowerPrice: item.vipPrice || '',
            originalPowerPrice: item.price || '',
            // 服务费列
            vipServicePrice: item.vipServiceFee || '',
            originalServicePrice: item.serviceFee || '',
            isLowest: String(item.lowest) === 'true'
          }));

          // 保证仅一个最低价标记
          let lowestIndex = mapped.findIndex(x => x.isLowest);
          if (lowestIndex === -1 && mapped.length > 0) {
            // 若后端未标最优，则选取合计价最小者标记
            let min = Number.MAX_VALUE;
            mapped.forEach((x, i) => {
              const v = parseFloat(x.vipPrice) || Number.MAX_VALUE;
              if (v < min) { min = v; lowestIndex = i; }
            });
            if (lowestIndex !== -1) mapped[lowestIndex].isLowest = true;
          }

          this.priceList = mapped;
        } else {
          console.error('加载场站价格详情失败:', response.msg);
          uni.showToast({ title: response.msg || '加载价格详情失败', icon: 'none' });
        }
      }).catch(error => {
        console.error('加载场站价格详情接口调用失败:', error);
        uni.showToast({ title: error.msg || '网络请求失败', icon: 'none' });
      });
    },
    // 加载启动充电前详情（写死二维码参数）
    loadStartChargeDetail() {
      // 按要求写死入参
      const qrCode = 'hlht://0118002000628041.MAC671GU2/1';
      getStationStartCharegDetail({ qrCode }).then(response => {
        console.log('启动充电前详情响应:', response);
        if (response.code === 0 && response.success) {
          const detail = response.data || {};
          // 站点基础信息
          const facilitiesText = `${detail.equipmentType || ''}${detail.power ? ' ｜' + detail.power + 'kw' : ''} ｜枪编号：${detail.connectorId || ''}`;
          this.detailStation = {
            ...this.detailStation,
            id: detail.stationId || this.detailStation.id,
            name: detail.stationName || this.detailStation.name,
            price: detail.price || this.detailStation.price,
            facilities: facilitiesText
          };
          // 绑定价格与时段
          this.startCharge = {
            startTime: detail.startTime || '',
            endTime: detail.endTime || '',
            price: detail.price || '',
            vipPrice: detail.vipPrice || '',
            connectorId: detail.connectorId || ''
          };
          // 记录二维码（与后续下单逻辑保持一致）
          this.QRCode = qrCode;
          // 拿到 stationId 后再拉取价格详情
          if (detail.stationId) {
            this.loadStationFeeDetail(detail.stationId);
          }
        } else {
          console.error('加载启动充电前详情失败:', response.msg);
          uni.showToast({ title: response.msg || '加载启动充电前详情失败', icon: 'none' });
        }
      }).catch(error => {
        console.error('加载启动充电前详情接口调用失败:', error);
        uni.showToast({ title: error.msg || '网络请求失败', icon: 'none' });
      });
    },
    // 新增：加载停车费详情
    loadStationParkFeeDetail(stationId) {
      getStationParkFeeDetail({ stationId: String(stationId) }).then(res => {
        if (res && res.code === 0 && res.success && res.data) {
          const d = res.data
          this.parkFeeDetail = {
            condition: d.condition || '暂无',
            duration: d.duration || '暂无',
            standards: d.standards || '暂无',
            remark: d.remark || '暂无'
          }
        } else {
          this.parkFeeDetail = { condition: '暂无', duration: '暂无', standards: '暂无', remark: '暂无' }
        }
      }).catch(() => {
        this.parkFeeDetail = { condition: '暂无', duration: '暂无', standards: '暂无', remark: '暂无' }
      })
    },
    // 获取用户信息（包括充电余额）
    getUserInfo() {
      getInfo().then(response => {
        console.log('用户信息响应:', response);
        if (response.code === 0 && response.success) {
          this.balanceAmount = response.data.chargeBalance || 0;
          console.log('充电余额已更新:', this.balanceAmount);
        } else {
          console.error('获取用户信息失败:', response.msg);
        }
      }).catch(error => {
        console.error('获取用户信息接口调用失败:', error);
      });
    },
    goToStopCharging() {
      // 测试跳转到停止充电页面
      console.log('测试停止充电页面');
      
      // 生成一个测试订单号
      const testOrderNum = 'TEST_' + Date.now();
      
      uni.navigateTo({
        url: `/pages/stopCharging/index?orderNum=${testOrderNum}`
      });
    },
    showPaymentMethodPopup(method) {
      // 设置当前支付方式
      this.currentPaymentMethod = method;
      // 显示弹窗
      this.$refs.paymentMethodPopup.open('bottom');
    },
    hidePaymentMethodPopup() {
      this.$refs.paymentMethodPopup.close();
    },
    selectAmount(amount) {
      this.selectedAmount = amount;
    },
    confirmPaymentMethod() {
      // 这里可以添加确认逻辑
      console.log('确认支付方式:', this.currentPaymentMethod, '金额:', this.selectedAmount);
      this.hidePaymentMethodPopup();
    }
  }
}
</script>

<style scoped>
.station-detail-page {
  background: #fbfbfb;
  min-height: 100vh;
  padding: 0;
}
.swiper-wrapper {
  background: #fff;
  border-radius: 18rpx;
  padding: 20rpx;
  margin: 20rpx auto;
  box-shadow: 0 4rpx 16rpx rgba(255, 153, 0, 0.08);
}
.swiper-img {
  width: 100%;
  height: 300rpx;
  display: block;
  border-radius: 12rpx;
}
.station-jam {
  background: linear-gradient(180deg, #b97a56 0%, #eac9b0 100%);
  border-bottom-right-radius: 16rpx;
  padding: 0 24rpx;
  height: 40rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: -5rpx;
  left: -5rpx;
}
.station-jam-text {
  color: #fff;
  font-size: 22rpx;
  font-weight: bold;
}
.station-item {
  width: 85%;
  margin: 20rpx auto 20rpx auto;
  background: #fff;
  border-radius: 18rpx;
  box-shadow: 0 4rpx 16rpx rgba(255, 153, 0, 0.08);
  padding: 30rpx;
  position: relative;
}
.station-info {
  flex: 1;
}
.station-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15rpx;
}
.station-name {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
}
.station-distance {
  display: flex;
  align-items: center;
  border: 1rpx solid #e5e5e5;
  border-radius: 24rpx;
  padding: 4rpx 8rpx;
}
.distance-text {
  font-size: 24rpx;
  color: #666;
}
.station-details {
  margin-bottom: 15rpx;
}
.station-facilities {
  font-size: 24rpx;
  color: #666;
}
.divider-line {
  height: 1rpx;
  background-color: #eee;
  margin: 15rpx 0;
}
.station-pricing {
  display: flex;
  align-items: baseline;
}
.price-label {
  font-size: 24rpx;
  color: #ff6b35;
}
.price-amount {
  font-size: 36rpx;
  font-weight: bold;
  color: #ff6b35;
}
.price-unit {
  font-size: 24rpx;
  color: #ff6b35;
  margin-right: 20rpx;
}
.station-rating {
  display: flex;
  align-items: center;
  background: none;
  padding: 0;
  width: fit-content;
  background: #c0601b;
  border-radius: 8rpx;
}
.station-rating-icon {
  width: 48rpx;
  height: 36rpx;
  border-radius: 8rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #c0601b;
  border: 1rpx solid #ca7531;
  margin-right: 0;
}
.station-rating-p {
  color: #f8e5a8;
  font-weight: bold;
  font-size: 24rpx;
}
.station-rating-rate {
  color: #fff;
  font-size: 20rpx;
  font-weight: bold;
}
.station-rating-text-bg {
  background: #c0601b;
  border-radius: 0 8rpx 8rpx 0;
  padding: 0 12rpx;
  height: 36rpx;
  display: flex;
  align-items: center;
}
.station-rating-text-numBg{
  background: #fff7f5;
  border-radius: 0 8rpx 8rpx 0;
  padding: 0 12rpx;
  height: 36rpx;
  display: flex;
  align-items: center;
}
.station-rating-text {
  color: #f8e5a8;
  font-size: 22rpx;
}
.station-rating-text-num {
  color: #ff6b35;
  font-size: 20rpx;
  font-weight: bold;
}
.vip-1{
  color: #c47a48;
  font-size: 24rpx;
  display: flex;
  align-items: center;
  height: 40rpx;
  margin-left: 15rpx;
}
.vip-2{
  color: #ff6600;
}
.vip-3{
  color: #c47a48;
  font-size: 24rpx;
  display: flex;
  align-items: center;
  height: 40rpx;
  margin-top: 5rpx;
}
.vip-btn {
  background: linear-gradient(90deg, #fc5734 0%, #fc356b 100%);
  color: #fff;
  font-size: 26rpx;
  padding: 12rpx 36rpx;
  border-radius: 36rpx;
  text-align: center;
  height: 50rpx;
  box-shadow: 0 4rpx 16rpx rgba(255, 153, 0, 0.2);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.station-status {
  display: flex;
  align-items: center;
  margin-left: auto;
}
.member-price-badge {
  display: inline-flex;
  align-items: center;
  height: 36rpx;
  border-radius: 8rpx;
  overflow: hidden;
}
.member-price-label {
  background: #ff6b35;
  color: #fff;
  font-size: 18rpx;
  font-weight: bold;
  padding: 0 12rpx;
  height: 36rpx;
  display: flex;
  align-items: center;
  border-radius: 8rpx 0 0 8rpx;
  box-sizing: border-box;
}
.member-price-value {
  position: relative;
  background: #fff;
  color: #ff6b35;
  font-size: 18rpx;
  font-weight: bold;
  padding: 0 16rpx;
  height: 36rpx;
  display: flex;
  align-items: center;
  border-radius: 0 8rpx 8rpx 0;
  border: 2rpx solid #ff6b35;
  border-left: none;
  box-sizing: border-box;
}
.fast-charge-badge {
  display: inline-flex;
  align-items: center;
  height: 54rpx;
  border-radius: 8rpx;
  overflow: hidden;
  flex: 1;
}
.fast-charge-label {
  background: #ff6b35;
  color: #fff;
  font-size: 28rpx;
  font-weight: bold;
  padding: 0 12rpx;
  height: 54rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8rpx 0 0 8rpx;
  box-sizing: border-box;
  flex: 0.2;
}
.fast-charge-value {
  position: relative;
  background: #fff;
  font-size: 28rpx;
  font-weight: bold;
  padding: 0 16rpx;
  height: 54rpx;
  display: flex;
  align-items: center;
  border-radius: 0 8rpx 8rpx 0;
  border: 2rpx solid #ff6b35;
  border-left: none;
  box-sizing: border-box;
  flex: 0.8;
  padding-left: 20rpx;
}
.power-text {
  font-size: 20rpx;
  margin-left: auto;
  color: #666;
}
.member-price-value::before {
  content: '';
  position: absolute;
  left: -12rpx;
  top: 0;
  width: 24rpx;
  height: 36rpx;
  background: #fff;
  border-radius: 18rpx 0 0 18rpx;
  z-index: 1;
}
.price-section {
  margin-top: 20rpx;
  padding: 20rpx;
  background: #fff;
  border-radius: 18rpx;
  box-shadow: 0 4rpx 16rpx rgba(255, 153, 0, 0.08);
}
.price-section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15rpx;
  width: 100%;
}
.parking-fee {
  font-size: 28rpx;
  font-weight: bold;
  color: #666;
}
.price-section-title {
  font-size: 28rpx;
  font-weight: bold;
  color: #333;
}
.price-section-time {
  font-size: 24rpx;
  color: #666;
  margin-right: 20rpx;
  margin-left: 20rpx;
}
.price-section-detail {
  font-size: 24rpx;
  color: #666;
  display: flex;
  align-items: center;
}
.price-cards {
  display: flex;
  justify-content: space-between;
  gap: 8rpx;
}

.price-card {
  flex: 1;
  background: linear-gradient(135deg, #fff9f0 0%, #fff7e6 100%);
  border-radius: 20rpx;
  padding: 24rpx 28rpx 24rpx 28rpx;
  display: flex;
  flex-direction: column;
  box-shadow: none;
  min-width: 0;
}

.origin-price {
  flex: 3.5;
  /* 右侧向左倾斜 */
  /*clip-path: polygon(0 0, 100% 0%, 98% 100%, 0% 100%); */
}

.vip-price {
  flex: 6.5;
  /* 左侧向右倾斜 */
  /*clip-path: polygon(2% 0, 100% 0, 100% 100%, 0% 100%);*/
}

.price-card-label {
  font-size: 24rpx;
  color: #ff6b35;
  font-weight: bold;
  margin-bottom: 10rpx;
}

.vip-price .price-card-label {
  color: #333;
}

.price-card-value {
  display: flex;
  align-items: baseline;
  gap: 8rpx;
}

.price-card-num {
  font-size: 36rpx;
  font-weight: bold;
  color: #ff6b35;
}
.price-card-unit {
  font-size: 20rpx;
  color: #666;
}
.price-card-btn {
  background: #ff6b35;
  color: #fff;
  font-size: 20rpx;
  font-weight: bold;
  padding: 4rpx 12rpx;
  border-radius: 8rpx;
  margin-left: 10rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}
.pile-info-row {
  display: flex;
  align-items: center;
  margin: 20rpx 0;
}
.pile-status-circle {
  width: 56rpx;
  height: 56rpx;
  border-radius: 50%;
  border: 4rpx solid #7ac143;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 24rpx;
}
.pile-status-text {
  color: #7ac143;
  font-size: 22rpx;
}
.pile-info-detail {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.pile-info-line {
  display: flex;
  align-items: center;
  margin-bottom: 6rpx;
}
.pile-info-bold {
  font-weight: bold;
  margin: 0 8rpx;
}
.facility-icons {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  margin-top: 20rpx;
}
.facility-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 10rpx 15rpx;
}
.facility-item uni-icons {
  margin-bottom: 8rpx;
}
.facility-item text {
  font-size: 20rpx;
  color: #666;
}

.parking-free-card {
  border-radius: 16rpx;
  margin: 24rpx 0 0 0;
  padding: 24rpx 0 0 0;
  box-shadow: none;
}
.parking-free-header {
  display: flex;
  align-items: flex-start;
}
.parking-icon-bg {
  width: 56rpx;
  height: 56rpx;
  background: #e6f0fa;
  border-radius: 12rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 18rpx;
}
.parking-icon {
  color: #4a90e2;
  font-size: 36rpx;
  font-weight: bold;
}
.parking-free-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.parking-free-title {
  font-size: 28rpx;
  font-weight: bold;
  color: #333;
  display: flex;
  align-items: baseline;
}
.free-time {
  font-size: 22rpx;
  font-weight: normal;
  margin-left: 8rpx;
}
.orange {
  color: #ff6b35;
  font-weight: bold;
}
.gray {
  color: #888;
}
.red {
  color: #ff6b35;
  font-weight: bold;
}
.parking-free-desc {
  font-size: 22rpx;
  color: #999;
  margin-top: 6rpx;
}
.parking-free-bottom {
  margin-top: 18rpx;
  background: #fef9f3;
  border-radius: 0 0 16rpx 16rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18rpx 24rpx;
}
.parking-free-tip {
  color: #c47a48;
  font-size: 24rpx;
}
.car-plate-display {
  font-size: 24rpx;
  font-weight: bold;
  color: #333;
  background: linear-gradient(135deg, #87CEEB 0%, #90EE90 100%);
  padding: 8rpx 16rpx;
  border-radius: 12rpx;
  border: 2rpx solid #8B4513;
  display: inline-block;
}
.parking-free-btn {
  color: #c47a48;
  font-size: 24rpx;
  font-weight: bold;
  padding: 6rpx 28rpx;
}

.prepay-section {
  display: flex;
  justify-content: space-between; /* 两侧对齐 */
  align-items: center; /* 垂直居中 */
  margin-bottom: 20rpx; 
  background: #fff;
  border-radius: 18rpx;
  padding: 20rpx 30rpx; /* 添加内边距 */
}

.prepay-title {
  font-size: 28rpx;
  font-weight: bold;
  color: #333;
  display: flex;
  align-items: center;
}

.prepay-tabs {
  flex: 6;
  display: flex;
  justify-content: flex-end;
  gap: 10rpx;
  border-radius: 12rpx;
  height: 80rpx;
  margin-left: 40rpx; /* 增加与标题的间距 */
}

.prepay-tab {
  flex: 1;
  font-size: 28rpx;
  font-weight: bold;
  color: #000000;
  padding: 11rpx 6rpx;
  border-radius: 12rpx;
  background: #f5f5f5;
  text-align: center;
  position: relative;
  height: 50rpx;
  width: 80rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

.prepay-tab.active {
  background: #ff6b35;
  color: #fff;
  border-color: #ff6b35;
}

.prepay-tab.disabled {
  color: #ccc;
  border-color: #e5e5e5;
  background: #f5f5f5;
}

.prepay-btn {
  background: #ff6b35;
  color: #fff;
  font-size: 28rpx;
  font-weight: bold;
  padding: 12rpx 24rpx;
  border-radius: 12rpx;
  text-align: center;
  height: 50rpx;
  box-shadow: 0 4rpx 16rpx rgba(255, 153, 0, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20rpx;
}

.prepay-btn.disabled {
  background: #ccc;
  color: #999;
  box-shadow: none;
  cursor: not-allowed;
}

.prepay-btn:disabled {
  background: #ccc;
  color: #999;
  box-shadow: none;
  cursor: not-allowed;
}

.charging-page-btn {
  background: #4CAF50;
  color: #fff;
  font-size: 28rpx;
  font-weight: bold;
  padding: 12rpx 24rpx;
  border-radius: 12rpx;
  text-align: center;
  height: 50rpx;
  box-shadow: 0 4rpx 16rpx rgba(76, 175, 80, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 20rpx;
}

.test-btn {
  background: #666;
  margin-top: 10rpx;
  font-size: 24rpx;
}

.prepay-input {
  width: 80rpx;
  border: none;
  background: transparent;
  color: #333;
  font-size: 24rpx;
  text-align: center;
  outline: none;
}
.prepay-tab:not(.active) .prepay-input {
  color: #ccc;
}

.price-popup-content {
  background-color: #fff;
  padding: 30rpx;
  width: 100%;
  box-sizing: border-box;
  border-radius: 24rpx 24rpx 0 0;
}

.price-popup-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 0 30rpx;
  border-bottom: 1rpx solid #eee;
}

.price-popup-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
}

.price-table {
  padding: 20rpx 0;
  width: 95%;
  margin: 0 auto;
}

.table-header {
  display: flex;
  align-items: center;
  padding: 30rpx 0;
  font-size: 24rpx;
  color: #666;
  text-align: center;
}

.table-row {
  display: flex;
  align-items: center;
  padding: 30rpx 0;
  height: 60rpx;
  font-size: 24rpx;
  color: #333;
  text-align: center;
  border-bottom: 1rpx solid #f5f5f5;
  position: relative;
}

.lowest-tag {
  position: absolute;
  top: 18rpx;
  left: 0rpx;
  background: #ff6b35;
  color: #fff;
  font-size: 20rpx;
  padding: 4rpx 8rpx;
  border-radius: 4rpx;
  transform: translateY(-50%);
}

.th, .td {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.time-col {
  flex: 2;
  text-align: left;
}

.type-col {
  flex: 1.5;
}

.price-col, .power-col, .service-col {
  flex: 1.5;
}

.equal-col, .plus-col {
  flex: 0.5;
}

.unit {
  font-size: 20rpx;
  color: #999;
  margin-left: 4rpx;
}

.vip-tag {
  background: #ff6b35;
  color: #fff;
  font-size: 20rpx;
  padding: 2rpx 8rpx;
  border-radius: 4rpx;
  margin-bottom: 4rpx;
}

.price-type {
  color: #999;
  font-size: 20rpx;
}

.price-value {
  color: #ff6b35;
  font-weight: bold;
  margin-bottom: 4rpx;
}

.original-price {
  color: #999;
  font-size: 20rpx;
  text-decoration: line-through;
}

.price-notice {
  display: flex;
  align-items: flex-start;
  padding: 20rpx;
  background: #f8f8f8;
  border-radius: 8rpx;
  margin-top: 30rpx;
}

.notice-text {
  font-size: 22rpx;
  color: #999;
  line-height: 1.4;
  margin-left: 8rpx;
  flex: 1;
}

.flex-container {
  display: flex;
  align-items: center;
  width: 100%;
}

.coupon-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  gap: 10rpx; /* 调整优惠券之间的间距 */
  margin-top: 20rpx;
}

.coupon-card {
  width: 200rpx;
  height: 137rpx;
  background: linear-gradient(90deg, #fe6445 0%, #fc4568 100%);
  border-radius: 24rpx;
  border: 2rpx solid #ffb199;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  box-shadow: 0 4rpx 16rpx rgba(255, 153, 0, 0.08);
  position: relative;
  padding: 5rpx;
  box-sizing: border-box;
}

.coupon-top {
  width: 100%;
  border-radius: 24rpx 24rpx 0 0;
  background: #fff;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  height: 70rpx;
  position: relative;
  z-index: 2;
  box-shadow: 0 2rpx 8rpx rgba(255, 153, 0, 0.05);
}

.coupon-num {
  color: #ff5e3a;
  font-size: 34rpx;
  font-weight: bold;
}
.coupon-mul {
  color: #ff5e3a;
  font-size: 24rpx;
  margin: 0 8rpx;
}
.coupon-count {
  color: #ff5e3a;
  font-size: 34rpx;
  font-weight: bold;
}

.coupon-bottom {
  width: 100%;
  text-align: center;
  color: #fff;
  font-size: 24rpx;
  position: absolute;
  bottom: 18rpx;
  left: 0;
  letter-spacing: 2rpx;
}

.coupon-arc {
  width: 100%;  
  height: 80rpx;
  background: #fff;
  margin: auto 0;
  position: relative;
  clip-path: ellipse(50% 20% at 50% 0%);
  z-index: 1;
  margin-bottom: 10rpx;
}

.custom-amount-popup {
  background-color: #fff;
  padding: 30rpx;
  width: 100%;
  box-sizing: border-box;
  border-radius: 24rpx 24rpx 0 0;
}

.custom-amount-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 0 30rpx;
  border-bottom: 1rpx solid #eee;
}

.custom-amount-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
}

.amount-input-section {
  margin-bottom: 20rpx;
  padding: 20rpx;
  background: #f5f5f5;
  border-radius: 12rpx;
}

.amount-input-container {
  display: flex;
  align-items: center;
  padding: 10rpx 15rpx;
  background: #fff;
  border-radius: 12rpx;
  border: 1rpx solid #eee;
}

.currency-symbol {
  font-size: 36rpx;
  font-weight: bold;
  color: #ff6b35;
  margin-right: 10rpx;
}

.amount-input {
  flex: 1;
  font-size: 48rpx;
  font-weight: bold;
  color: #333;
  text-align: right;
  padding-right: 10rpx;
  border: none;
  outline: none;
  background: transparent;
}

.keyboard-section {
  display: flex;
  flex-direction: column;
  gap: 10rpx;
}

.keyboard-row {
  display: flex;
  justify-content: space-around;
  gap: 10rpx;
}

.keyboard-key {
  flex: 1;
  font-size: 36rpx;
  font-weight: bold;
  color: #333;
  background: #f5f5f5;
  border-radius: 12rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 15rpx 0;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
}

.action-key {
  background: #ff6b35;
  color: #fff;
  font-weight: bold;
}

.confirm-key {
  width: 200rpx;
  margin-left: auto;
  margin-right: 0;
}

.parking-popup-content {
  background-color: #fff;
  padding: 30rpx;
  width: 100%;
  box-sizing: border-box;
  border-radius: 24rpx 24rpx 0 0;
}

.parking-popup-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 0 30rpx;
  border-bottom: 1rpx solid #eee;
}

.parking-popup-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
}

.parking-detail-content {
  padding: 20rpx 0;
}

.parking-detail-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15rpx;
}

.parking-free-title {
  font-size: 28rpx;
  font-weight: bold;
  color: #333;
}

.parking-bind-link {
  font-size: 24rpx;
  color: #c47a48;
  font-weight: bold;
}

.parking-detail-list {
  margin-bottom: 15rpx;
}

.parking-detail-item {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10rpx;
}

.parking-detail-label {
  font-size: 24rpx;
  color: #666;
}

.parking-detail-value {
  font-size: 24rpx;
  color: #333;
  font-weight: bold;
}

.parking-detail-notice {
  padding: 15rpx 0;
  border-top: 1rpx solid #eee;
}

.parking-notice-text {
  font-size: 22rpx;
  color: #999;
  line-height: 1.4;
}

.vehicle-select-popup {
  background-color: #fff;
  padding: 30rpx;
  width: 100%;
  box-sizing: border-box;
  border-radius: 24rpx 24rpx 0 0;
}

.vehicle-select-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 0 30rpx;
  border-bottom: 1rpx solid #eee;
}

.vehicle-select-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
}

.vehicle-list {
  max-height: 600rpx; /* 控制弹窗内容最大高度 */
  overflow-y: auto; /* 允许滚动 */
  margin-bottom: 20rpx;
}

.vehicle-item {
  display: flex;
  align-items: center;
  padding: 20rpx 0;
  border-bottom: 1rpx solid #f5f5f5;
}

.vehicle-icon {
  width: 80rpx;
  height: 80rpx;
  border-radius: 40rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 20rpx;
}

.car-icon {
  width: 40rpx;
  height: 40rpx;
}

.vehicle-info {
  flex: 1;
  display: flex;
  align-items: center;
}

.vehicle-plate {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
  margin-right: 10rpx;
}

.vehicle-tag {
  background: #ff6b35;
  color: #fff;
  font-size: 20rpx;
  padding: 4rpx 12rpx;
  border-radius: 8rpx;
}

.tag-text {
  font-weight: bold;
}

.vehicle-radio {
  margin-left: 20rpx;
}

.vehicle-empty {
  text-align: center;
  padding: 40rpx 0;
  color: #999;
  font-size: 28rpx;
}

.vehicle-select-bottom {
  display: flex;
  justify-content: center;
  padding: 20rpx 0;
  border-top: 1rpx solid #eee;
}

.add-vehicle-link {
  display: flex;
  align-items: center;
  color: #ff6b35;
  font-size: 28rpx;
  font-weight: bold;
}

.payment-method-section {
  display: flex;
  flex-direction: column;
  margin-bottom: 20rpx;
}

.payment-method-title {
  font-size: 28rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 10rpx;
}

.payment-option {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10rpx 0;
}

.payment-option-left {
  display: flex;
  align-items: center;
}

.payment-icon {
  width: 40rpx;
  height: 40rpx;
  margin-right: 10rpx;
}

.payment-info {
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-left: 10rpx;
}

.payment-text {
  font-size: 24rpx;
  font-weight: bold;
}

.payment-amount {
  font-size: 24rpx;
  font-weight: bold;
}

.payment-option-right {
  display: flex;
  align-items: center;
}

.payment-status-icon {
  width: 30rpx;
  height: 30rpx;
}

.payment-divider {
  height: 1rpx;
  background-color: #eee;
  margin: 10rpx 0;
}

.payment-card {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 30rpx;
  background-color: #fff;
  border-radius: 18rpx;
  margin: 20rpx 0;
  box-shadow: 0 4rpx 16rpx rgba(255, 153, 0, 0.08);
  border: 1rpx solid #f0f0f0;
}

.payment-card-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

.payment-amount-display {
  display: flex;
  align-items: center;
}

.amount-value {
  font-size: 36rpx;
  font-weight: bold;
  color: #ff6b35;
  margin-left: 10rpx;
}

.start-charging-btn {
  background: #ff6b35;
  color: #fff;
  font-size: 28rpx;
  font-weight: bold;
  padding: 15rpx 40rpx;
  border-radius: 50rpx;
  height: 60rpx;
  min-width: 200rpx;
  box-shadow: 0 4rpx 16rpx rgba(255, 153, 0, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 支付方式选择弹窗样式 */
.payment-method-popup {
  background-color: #fff;
  padding: 30rpx;
  width: 100%;
  box-sizing: border-box;
  border-radius: 24rpx 24rpx 0 0;
}

.payment-method-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 0 30rpx;
  border-bottom: 1rpx solid #eee;
}

.payment-method-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
  flex: 1;
  text-align: center;
}

.amount-buttons {
  display: flex;
  justify-content: space-between;
  gap: 20rpx;
  margin: 30rpx 0;
}

.amount-btn {
  flex: 1;
  background: #f5f5f5;
  color: #333;
  font-size: 28rpx;
  font-weight: bold;
  padding: 20rpx 0;
  border-radius: 12rpx;
  text-align: center;
  border: 2rpx solid transparent;
}

.amount-btn.active {
  background: #ff6b35;
  color: #fff;
  border-color: #ff6b35;
}

.custom-amount-input {
  display: flex;
  align-items: center;
  background: #f5f5f5;
  border-radius: 12rpx;
  padding: 20rpx;
  margin: 30rpx 0;
}

.custom-amount-input .currency-symbol {
  font-size: 32rpx;
  font-weight: bold;
  color: #ff6b35;
  margin-right: 20rpx;
}

.amount-input-field {
  flex: 1;
  font-size: 28rpx;
  color: #333;
  background: transparent;
  border: none;
  outline: none;
}

.prepay-description {
  margin: 30rpx 0;
}

.description-title {
  display: block;
  font-size: 28rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 10rpx;
}

.description-text {
  display: block;
  font-size: 24rpx;
  color: #666;
  line-height: 1.4;
}

.confirm-btn {
  background: #ff6b35;
  color: #fff;
  font-size: 32rpx;
  font-weight: bold;
  padding: 20rpx 0;
  border-radius: 12rpx;
  text-align: center;
  margin-top: 30rpx;
}

</style> 